<!--
 描述: 左下
-->

<template>
    <div class="wrap-container sn-container">
        <div class="sn-content">
            <div class="sn-title">党员学历分布</div>
            <div class="sn-body">
                <div class="wrap-container">
                    <div class="person">
                        <div class="pers person1"></div>
                        <div class="pers person2"></div>
                        <div class="pers person3"></div>
                    </div>

                    <div class="svgs">
                        <svg width="244" height="264" version="1.1" xmlns="http://www.w3.org/2000/svg"
                             xmlns:xlink="http://www.w3.org/1999/xlink">
                            <defs>
                                <linearGradient id="linear" x1="0%" y1="0%" x2="0%" y2="100%">
                                    <stop offset="0%" style="stop-color:#0a6aff;stop-opacity:0.47"></stop>
                                    <stop offset="40%" style="stop-color:#5cffff;stop-opacity:1"></stop>
                                    <stop offset="100%" style="stop-color:#0a6aff;stop-opacity:1"></stop>
                                </linearGradient>
                                <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto"
                                        markerUnits="strokeWidth">
                                    <path d="M0,0 L0,6 L9,3 z" fill="rgb(11,108,255)"></path>
                                </marker>
                            </defs>
                            <path d="M136 84C138 84 195 84 206 116" fill="none" stroke="url(#linear)" stroke-opacity="1"
                                  marker-end="url(#arrow)"></path>
                            <path d="M134 84C136 84 81 82 58 123" fill="none" stroke="url(#linear)" stroke-opacity="1"
                                  marker-end="url(#arrow)"></path>
                            <path d="M132 86C134 86 120 68 93 67" fill="none" stroke="url(#linear)" stroke-opacity="1"
                                  marker-end="url(#arrow)"></path>
                            <path d="M134 86C136 86 132 78 134 74C136 69 150 52 150 52" fill="none"
                                  stroke="url(#linear)" stroke-opacity="1" marker-end="url(#arrow)"></path>
                            <path d="M134 85C136 85 146 65 183 65" fill="none" fill-opacity="0" stroke="url(#linear)"
                                  marker-end="url(#arrow)"></path>
                        </svg>
                    </div>

                    <div class="svgs">
                        <div class="text" :class="`per${index + 2}`" v-for="(item, index) in arrData" :key="index">
                            <span>{{ item.name }}</span>
                            <span>{{ item.number }}</span>人
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import store from '../../../store/index'

    export default {
        name: "dynamicList",
        components: {},
        store,
        watch: {
            "$store.state.flag"(args) {

                this.arrData = [];
                this.getEchart(args);
            }
        },
        data() {
            return {
                baseUrl: domain.testUrl,
                arrData: [],
                baseName: ':name'
            }
        },
        mounted() {
            this.getEchart();
        },
        methods: {
            getEchart(param) {

                if (param != undefined && param != null) {
                    this.baseUrl = localStorage.getItem('baseUrl');

                    this.baseName = param;
                }

                var url = this.baseUrl + "memberDatav/findMemberByEducation?name=" + this.baseName;


                axios.post(url).then((response) => {
                    // console.log(response); //请求正确时执行的代码
                    response.data.forEach((res) => {
                        this.arrData.push({
                            name: res.x,
                            number: res.y
                        });
                    })

                }).catch(function (response) {
                    console.log(response); //发生错误时执行的代码
                });
            }
        },
        beforeDestroy() {

        }
    };
</script>

<style lang="scss" scoped>
    .sn-container {
        left: 10px;
        top: 728px;
        width: 508px;
        height: 30%;
        .person {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            .pers {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                background-repeat: no-repeat;
                background-position: center center;
                &.person1 {
                    background-image: url(../../../assets/img/online.png);
                    transform: rotateX(64deg) rotateZ(0deg);
                    top: 18%;
                }
                &.person2 {
                    background-image: url(../../../assets/img/cir-2.png);
                    animation: move 10s linear infinite;
                    -webkit-animation: move 10s linear infinite;
                    transform: rotateX(64deg);
                    top: 18%;
                }
                &.person3 {
                    background-image: url(../../../assets/img/person-1.png);
                    top: 8%;
                }
            }
        }

        .svgs {
            width: 270px;
            height: 260px;
            margin: auto;
            top: 0;
            position: absolute;
            right: 0;
            left: 0;
            bottom: 0;
        }
        .text {
            position: absolute;
            width: 50px;
            height: 67px;
            background-image: url(../../../assets/img/cir-1.png);
            background-repeat: no-repeat;
            background-position: center center;
            color: rgb(114, 198, 230);
            text-align: center;
            span {
                &:nth-child(1) {
                    display: block;
                    width: 52px;
                    margin-top: 10px;
                    line-height: 12px;
                    transform: scale(0.85);
                    height: 22px;
                }
                &:nth-child(2) {
                    font-size: 14px;
                    font-weight: bold;
                }
            }
            &.per1 {
                top: 205px;
                left: 50px;
            }
            &.per2 {
                top: 103px;
                left: 3px;
            }
            &.per3 {
                top: 35px;
                left: 35px;
            }
            &.per4 {
                top: -10px;
                left: 130px;
            }
            &.per5 {
                top: 33px;
                left: 193px;
            }
            &.per6 {
                top: 105px;
                left: 210px;
            }
            /*&.per7 {*/
            /*top: 2215px;*/
            /*left: 180px;*/
            /*}*/
        }

    }

    @-webkit-keyframes move {
        0% {
            transform: rotateX(-64deg) rotateZ(360deg);
        }
        100% {
            transform: rotateX(-64deg) rotateZ(0deg);
        }
    }

    @keyframes move {
        0% {
            transform: rotateX(-64deg) rotateZ(360deg);
        }
        100% {
            transform: rotateX(-64deg) rotateZ(0deg);
        }
    }


</style>
